<template>
  <div class="view-wallet-logs">
    <r-tab fixed :list="tabs" @update="toggleTab" v-model="activeTab"/>
    <r-panel :bluebird="loadList" v-model="list" @connect="connect" class="panel" syncRoute>
      <div v-for="(log, index) in list" :key="index">
        <div class="log">
          <div>
            <h3>{{log.title}}</h3>
            <p>{{log.date}}</p>
          </div>
          <span class="money" :class="{positive: log.money > 0}">{{log.money | moneyLog}}</span>
        </div>
      </div>
    </r-panel>
  </div>
</template>
<script>
import RTab from 'src/components/r-tab'
import RPanel from 'src/components/r-panel'
import walletService from 'src/service/walletService'
import moneyLog from 'src/filters/moneyLog'
export default {
  name: 'view-wallet-logs',
  components: {
    RTab,
    RPanel
  },
  filters: {
    moneyLog
  },
  data () {
    return {
      tabs: [
        {name: '全部', value: 0},
        {name: '支出', value: 1},
        {name: '收入', value: 2}
      ],
      refresher: null,
      list: null
    }
  },
  computed: {
    defaultTab () {
      return this.tabs[0].value
    },
    activeTab: {
      get () {
        const {tab} = this.$route.query
        return tab ? parseInt(tab) : this.defaultTab
      },
      set (tab) {
        const query = {...this.$route.query, tab}
        if (tab === this.defaultTab) {
          delete query.tab
        }
        this.$router.replace({query})
      }
    }
  },
  methods: {
    toggleTab (tab) {
      this.activeTab = tab
      this.refresher()
    },
    loadList (pageInfo) {
      return walletService.loadLogs({...pageInfo, type: this.activeTab})
    },
    connect (refresher) {
      this.refresher = refresher
    }
  }
}
</script>
<style lang="scss">
  @import "../../styles/index";

  .view-wallet-logs {
    .panel {
      @extend %viewport-basic;
      top: $height-tab;
      bottom: 0;
    }

    .log {
      @extend %flex-justify;
      @extend %bottom-thin;
      margin-left: $breath;
      padding: 12px $breath 12px 0;
      color: $color-head;

      .money {
        font-size: 20px;
        margin-left: 30px;
        word-break: keep-all;

        &.positive {
          color: $color-info;
        }
      }

      h3 {
        font-size: 14px;
        margin: 0;
        @extend %ellipsis;
      }

      p {
        font-size: 12px;
        color: $color-placeholder;
      }
    }
  }
</style>
